{% stylesheet %}
.block_newsletter {
    /* padding: 100px 0; */
    text-align: center;
    position: relative;
    background-position: center center;
    background-size: cover;
}
.block_newsletter h3 {
    text-align: center;
    font-size: 26px;
}

.block_newsletter .block_detail {
    
}
.block_newsletter .layer_opacity {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.block_newsletter .block_newsletter_content {
    position: relative;
    z-index: 9;
}

.block_newsletter form {
    max-width: 520px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

}

.block_newsletter .newsletter_txt {
    height: 44px;
    width: calc(100% - 160px);
    text-indent: 10px;
    box-sizing: border-box;
    border-radius: var(--button_border_radius);
    border: 1px solid #d7dcde;
    transition:all 0.5s;
}
.block_newsletter .newsletter_txt:focus{
    border-color: #000;
}
.block_newsletter .newsletter_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 140px;
    height: 44px;
    cursor: pointer;
    border-radius: var(--button_border_radius);
    font-family: var(--header_font_family);
    margin-left:20px;
}

@media (max-width: 767px) {
    .block_newsletter form {
        flex-wrap: wrap;
    }

    .block_newsletter .newsletter_txt {
        width: 100%;
    }
    .block_newsletter .newsletter_btn {
        width: 100%;
        margin: 15px 0 0;
    }
    .block_newsletter .block_newsletter_content{
        padding:0 15px;
    }
}
{% endstylesheet %}
<div class="block_newsletter {% if section.settings.fullScreen %}full_container_wrapper{% else %}container_wrapper{% endif %}" style="background-image: url({{ section.settings.newsletterBg.src }});background-color:  {{ section.settings.newsletterBgColor }};padding: {{ section.settings.padding.top | abs }}px {{ section.settings.padding.right | abs }}px {{ section.settings.padding.bottom | abs }}px {{ section.settings.padding.left | abs }}px;" >
    <div class="layer_opacity" style="opacity: {{ section.settings.layerOpacity  | divided_by : 100 }}; background-color: {{ section.settings.layerBgColor }};"></div>
    <div class="block_newsletter_content {% if section.settings.format == '2' %}format_style{% endif %}">
        {% if section.settings.title != '' or section.settings.detail != '' %}
        <div class="block_title">
            {% if section.settings.title != '' %}<h2 style="color: {{ section.settings.titleColor }}">{{ section.settings.title }}</h2>{% endif %}
            {% if section.settings.detail != '' %}<div class="block_detail" style="color: {{ section.settings.detailColor }}">{{ section.settings.detail }}</div>{% endif %}
        </div>
        {% endif %}
        <form>
            <input id="block_newsletter_email_{{block_id}}" name="newsletter_email" type="text" value="" class="newsletter_txt" placeholder="{{ lang.general.email }}" >
            <button onclick="blockSubmitNewsletter{{block_id}}()" name="newsletter_btn" type="button" value="" class="newsletter_btn" style="background-color: {{ section.settings.buttonBgColor }};color: {{ section.settings.buttonColor }};" >
              {{ section.settings.buttonName }}
            </button>
        </form>
    </div>
</div>
 
<script type="text/javascript">
    const blockSubmitNewsletter{{block_id}} = moi.throttle(function(){
        var domEmail =  "#block_newsletter_email_{{block_id}}";
        email = $("#block_newsletter_email_{{block_id}}").val();
        if (email == "")
        {
            moi.tooltip({
                placement: "top",
                el: domEmail,
                timer: 5000,
                space: 0,
                content: "{{ lang.general.please_enter_a_valid_email_address }}"
            })
            return;
        }
        $isvalidemail = /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(email);
        if (!$isvalidemail)
        {
            moi.tooltip({
                placement: "top",
                el: domEmail,
                timer: 1000,
                space: 0,
                content: "{{ lang.general.please_enter_a_valid_email_address }}"
            })
            return;
        }
        const load = moi.nodeShowLoading('.newsletter_btn','{{ section.settings.buttonColor }}');
        moi.ajax({
            url: '/module/newsletter',
            type: 'POST',
            data: JSON.stringify({
                email: email
            }),
            dataType: 'json',
            cache: false,
            complete: function () {
                  load.close();
            },
            success: function(res) {
                if (res.data && res.data.data) {
                    callback_generate_lead()
                    moi.message(
                        {
                            content: '{{ section.settings.newsletterTip }}'
                        }
                    );
                } else {
                    moi.tooltip({
                        placement: "top",
                        el: domEmail,
                        timer: 1000,
                        space: 0,
                        content: "{{ lang.general.subscribe_failed }}"
                    })
                }
            },
            error: function() {
                moi.tooltip({
                    placement: "top",
                    el: domEmail,
                    timer: 1000,
                    space: 0,
                    content: "{{ lang.general.connection_fails_please_retry_refresh }}"
                })
            }
        });
    },3000)
    function blockNewsletterfocus(){
        if($("#block_newsletter_email_<{$block_id}>").val()=="{{ lang.general.your_mail_address }}"){
            $("#block_newsletter_email_<{$block_id}>").val("")
        }
    }
    function blockNewsletterblur(){
        if($("#block_newsletter_email_<{$block_id}>").val()==""){
            $("#block_newsletter_email_<{$block_id}>").val("{{ lang.general.your_mail_address }}")   
        }   
    }   
</script>   

{% schema %}
{
  "tag": "section",
  "class": "block_newsletter",
  "max_blocks":0,
  "is_global": false,
  "name": {
    "zh_CN": "订阅"
  },
  "max_blocks": "",
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "设置"
      }
    },
    {
      "type": "card_layout",
      "label": {
        "zh_CN": "内容留白"
      },
      "id": "padding"
    },
    {
      "type": "card_input",
      "id": "title",
      "label": {
        "zh_CN": "标题"
      },
      "placeholder": {
        "zh_CN": "请输入标题"
      }
    },
    {
      "type": "card_text_editor",
      "id": "detail",
      "label": {
        "zh_CN": "简短描述"
      },
      "placeholder": {
        "zh_CN": "请输入描述"
      }
    },
    
    {
      "type": "card_input",
      "id": "buttonName",
      "label": {
        "zh_CN": "订阅按钮文字"
      }
    },
    {
      "type": "card_textarea",
      "id": "newsletterTip",
      "label": {
        "zh_CN": "订阅成功文字"
      }
    },
   
    {
      "type": "card_image",
      "label": {
        "zh_CN": "背景图片"
      },
      "default": {
        "src": "",
        "alt": ""
      },
      "id": "newsletterBg"
    },
    {
      "type": "card_switch",
      "label": {
        "zh_CN": "宽度铺满"
      },
      "id": "fullScreen"
    },
    {
      "type": "card_color",
      "label": {
        "zh_CN": "蒙层颜色"
      },
      "id": "layerBgColor"
    },
    {
      "type": "card_slider",
      "id": "layerOpacity",
      "max": "100",
      "min": "0",
      "label": {
        "zh_CN": "蒙层透明度"
      }
    },
    {
      "type": "card_header",
      "label": {
        "zh_CN": "颜色设置"
      }
    },
    {
      "type": "card_color",
      "label": {
        "zh_CN": "背景颜色"
      },
      "id": "newsletterBgColor"
    },
    {
      "type": "card_color",
      "label": {
        "zh_CN": "标题颜色"
      },
      "id": "titleColor"
    },
    {
      "type": "card_color",
      "label": {
        "zh_CN": "描述颜色"
      },
      "id": "detailColor"
    },
    {
      "type": "card_color",
      "label": {
        "zh_CN": "按钮背景颜色"
      },
      "id": "buttonBgColor"
    },
    {
      "type": "card_color",
      "label": {
        "zh_CN": "图标/按钮文字颜色"
      },
      "id": "buttonColor"
    }
  ],
  "blocks": [],
  "default": {
    "settings": {
      "padding":{
        "top": "70",
        "left": "0",
        "right": "0",
        "bottom": "70"
      },
      "title": "Subscribe to our newsletter",
      "detail": "Join our Friends and Family Mailing List",
      "buttonName": "Subscribe",
      "newsletterTip": "Thank you for joining our mailing list!",
      "format": "2",
      "newsletterBg": {
        "src": "",
        "alt": ""
      },
      "fullScreen": true,
      "newsletterBgColor": "#ffffff",
      "layerBgColor": "#000",
      "layerOpacity": "0",
      "titleColor": "#1d1f21",
      "detailColor": "#888",
      "buttonBgColor": "#F2BEAC",
      "buttonColor": "#fff"
    },
    "blocks": []
  }
}
{% endschema %}